<script lang="ts" setup>
import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'
import { reactive } from 'vue'

const formInline = reactive({ gender: '' })

const onSubmit = () => {
    console.log('submit!')
}

const currentPage4 = ref(4)// 当前页
const pageSize4 = ref(5)// 每页显示条数
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}

const tableData = [
    {
        id: '1',
        name: 'Tom',
        age: '20',
        gender: '男',
        phone: '123456789',
    },
    {
        id: '2',
        name: 'Tom',
        age: '20',
        gender: '男',
        phone: '123456789',
    },
    {
        id: '3',
        name: 'Tom',
        age: '20',
        gender: '男',
        phone: '123456789',
    }
]
import { Delete, Edit } from '@element-plus/icons-vue'// 引入图标
</script>

<template>
    <el-card>
        <div class="card-header">
            <span>文章管理</span>
            <el-button type="primary">发布文章</el-button>
        </div>
        <el-divider />
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="性别">
                <el-select v-model="formInline.gender" placeholder="请选择" clearable>
                    <el-option label="男" value="1" />
                    <el-option label="女" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="defualt" @click="onSubmit">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" stripe>
            <!-- 未指定 width的 column，会自动分配剩余宽度 -->
            <el-table-column prop="id" label="编号" width="60" />
            <el-table-column prop="name" label="名称" width="100" />
            <el-table-column prop="age" label="年龄" width="60" />
            <el-table-column prop="gender" label="性别" width="60" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column label="操作" width="180">
                <el-button type="primary" :icon="Edit" circle />
                <el-button type="danger" :icon="Delete" circle />
            </el-table-column>
        </el-table>

        <el-pagination class="el-p" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[5, 10, 15, 20]" :size="size" :disabled="disabled" :background="background"
            layout="jumper, total, sizes, prev, pager, next" :total="20" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>

</template>
<!-- scoped：样式只对当前组件有效 -->
<style scoped>
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.card-header {
    display: flex;
    /* 两边分别对齐 */
    justify-content: space-between;
}
</style>